<template>
    <div style="width: 1000px;height: 500px;border: 1px solid #333;" ref="chart"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import icon from './light.webp';
let chart = ref();
onMounted(() => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom, {}, { renderer: 'svg' });
    let option = {
        xAxis: {
            show: true,
            type: 'value',
            max: 500
        },
        yAxis: {
            show: true,
            type: 'value',
            max: 1000
        },
        grid: {
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
        },
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 40,
                coordinateSystem: 'cartesian2d',
                label: {
                    show: true,
                    // position:'top'
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                data: [
                    {
                        fixed: true,
                        symbolSize: 100,
                        name: '0',
                        value: [0, 100],
                        symbol: 'image://' + icon
                    },
                    {
                        fixed: true,
                        symbolSize: 200,
                        name: '0-1',
                        value: [100, 190],        //相当于位置
                        symbol: 'image://' + icon
                    }
                ],
            },
            {
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                z: 1,
                effect: {
                    show: true,
                    smooth: false,
                    trailLength: 0,
                    roundTrip: true,
                    symbol:'image://'+icon,
                    color: 'rgba(55,155,255,0.5)',
                    symbolSize: 30
                },
                lineStyle: {
                    normal: {
                        curveness: -0.2
                    }
                },
                data: [
                    [
                        { coord: [100, 190] },
                        { coord: [0, 100] },
                    ]
                ]
            }
        ],
    };
    myChart.setOption(option);
})
</script>